<template>
	<view class="hui">
		<view class="banner">
			<swiper class="swiper" :indicator-dots="false" autoplay="true" duration="2000" circular="true"
				disable-touch="true">
				<swiper-item v-for="(item,index) in info.images" :key="index">
					<image :src="item"></image>
				</swiper-item>
			</swiper>
		</view>

		<view class="content_box">
			<view>
				<view>{{info.name}}</view>
				<view class="site_box">
					<u-icon color="#969696" size="35" name="map"></u-icon>
					<view class="site">{{info.site}}</view>
				</view>
			</view>
			<button open-type="share">
			<view class="zhuan_box">
				<u-icon name="zhuanfa" color="#949494" size="48"></u-icon>
				<view>分享</view>
			</view>
			</button>
			
		</view>
		
		<view class="c_box">
			<view class="c_title">
				详情介绍
			</view>
			<view class="content">
				<rich-text :nodes="info.content"></rich-text>
			</view>
		</view>

         <view v-if="(info.jd&&info.wd)||info.mobile" style="height: 66px;"></view>

         <view class="bottom_box" v-if="(info.jd&&info.wd)||info.mobile">
			 <view v-if="info.jd&&info.wd" class="btn bule" @click="setDh()">
				 <image class="icon" mode="widthFix" src="@/static/img/dh.png"></image>
				 <view>一键导航</view>
			 </view>
			 <view v-if="info.mobile" class="btn orange" @click="$project.toPhone(info.mobile)">
				  <image class="icon" mode="widthFix" src="@/static/img/bhm.png"></image>
				 <view>一键拨号</view>
			 </view>
		 </view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				params: {
					id: ''
				},
				info: {}
			}
		},
		onShareAppMessage() {
		   	return {
				title:this.info.name,
				imageUrl:this.info.image,
		   		path: '/pages/fw/mer/info?id='+this.info.id
		   	}
		},
		onLoad(e) {
			if (e.id) {
				this.params.id = e.id;
			}
			if(e.title){
				uni.setNavigationBarTitle({
					title:e.title
				})
			}
			this.getInfo();
		},
		methods: {
			setDh(){
				uni.openLocation({
					latitude:Number(this.info.wd),
					longitude:Number(this.info.jd),
					name:this.info.name,
					address:this.info.site,
					fail(error) {
						console.log(error)
					}
				})
			},
			getInfo() {
				this.$get(this.$api.merInfo, this.params, res => {
					let data = res.data;
					if (data.code == 1) {
						if(data.data.content){
							
							data.data.content = this.$formatRichText(data.data.content).replace(/src="\//g,
								'src="' + getApp().globalData
								.imgRemote + '/');
						}
						this.info = data.data;
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.hui{
		background-color: #EEEEEE;
		min-height: 100vh;
	}
	.swiper {
		width: 100%;
		height: 500rpx;

		image {
			width: 100%;
			height: 500rpx;
		}
	}
	
	.content_box{
		box-sizing: border-box;
		padding:30rpx 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
		background-color: white;
	}
	
	.zhuan_box{
		text-align: center;
		font-size: 26rpx;
		color: #949494;
	}
	
	.site_box{
		display: flex;
		align-items: center;
		font-size: 26rpx;
		margin-top: 15rpx;
		color: #414141;
	}
	.site{
		margin-left:8rpx;
	}
	.c_box{
		box-sizing: border-box;
		padding: 0 20rpx;
		background-color: white;
		margin-bottom: 25rpx;
	}
	.c_title{
		
		box-sizing: border-box;
		padding:20rpx 20rpx;
		border-bottom: 1rpx solid #EEEEEE;
	}
	.content{
		box-sizing: border-box;
		padding:15rpx 20rpx;
		line-height: 60rpx;
	}
	
	.bottom_box{
		background-color: white;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 35rpx 15%;
		color: white;
		font-size: 28rpx;
	}
	
	.btn{
		box-sizing: border-box;
		padding: 12rpx 20rpx;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
	}
	.bule{
		background-color: #247CEA;
	}
	.orange{
		background-color: #F8641C;
	}
	.icon{
		width: 40rpx;
		margin-right: 10rpx;
	}
	button {
	  margin: 0;
	  padding: 0;
	  background-color: #fff;
	  line-height: inherit;
	  border-radius: 0;
	  border: none;
	  font-size: 26rpx;
	}
</style>